import { ref } from 'vue'
import { nextTick } from 'vue'
export default {
  setup() {
    const count = ref(0)
    const msg = ref('ss')
    const rawHtml = ref('<span style="color: red">This should be red.</span>')
    const dynamicId = ref('00234')
    const CId = ref('32')
    const id = ref('g-887')
    const isButtonDisabled = false
    const number = ref(1)
    const ok = ref(true)
    const message = ref("duhd dedeo 08922 dddd")

    const obj = ref({
      nested: { count: 0 },
      arr: ['foo', 'bar']
    })
    function mutateDeeply() {
      // 以下都会按照期望工作
      obj.value.nested.count++
      obj.value.arr.push('baz')
    }

    //动态绑定多个值
    const objectOfAttrs = {
      id: 'container',
      class: 'wrapper'
    }



    async function increment() {
      // 在 JavaScript 中需要 .value
      count.value++
      await nextTick()
      // 现在 DOM 已经更新了
      console.log("现在 DOM 已经更新了")
    }

    return { 
      count,
      msg,
      rawHtml,
      dynamicId,
      CId,
      id,
      isButtonDisabled,
      objectOfAttrs,
      number,
      ok,
      message,
      increment,
      obj,
      mutateDeeply
    }
  },
  template: `<div>
    <button @click="count++">{{ count }} </button>
    <button @click="increment">{{ count }} </button>
    <span>Message:{{msg}}</span>
    <p>Using text interpolation: {{ rawHtml }}</p>
    <p>Using v-html directive: <span v-html="rawHtml"></span></p>
    <div v-bind:id="dynamicId">Hello world {{ dynamicId }}</div>
    <div :id="CId">Hello world {{ CId }}</div>
    <div :id>Hello world {{ id }}</div>
    <button :disabled="isButtonDisabled">Button</button>
    <div v-bind="objectOfAttrs">动态绑定多个值</div>

    <div>{{ number + 1 }}</div>
    <div>{{ ok ? 'YES' : 'NO' }}</div>
    <div>{{ message.split(' ').reverse().join('-') }}</div>
    <div>{{ number + 1 }}</div>
    <div>{{obj.nested.count}}</div>
    <div>{{obj.arr}}</div>

    <button @click="mutateDeeply">调整数量</button>

  </div>`
}